<template>
  <div class="course_detail">
    <y-watch-video :video="videoSrc" v-if="courseInfo.isPay" :courseInfo="courseInfo" @playfunc="videoPlay" :nowNo="nowPeriodNo" ref="watchVideo"></y-watch-video>
    <y-display v-else :courseInfo="courseInfo" ref="watchVideo"></y-display>
    <div class=" detail_info detail_box clearfix">
      <div class="layout_left">
        <ul class="course_tab clearfix">       
          <li :class="{on: tab == 'big'}"><a href="javascript:" @click="tab = 'big'">视频教学</a></li>
          <li :class="{on: tab == 'task'}"><a href="javascript:" @click="tab = 'task'">作业</a></li>       
          <li :class="{on: tab == 'classResource'}"><a href="javascript:" @click="tab = 'classResource'">课堂资源</a></li>
          <li :class="{on: tab == 'answerDoubt'}"><a href="javascript:" @click="tab = 'answerDoubt'">提问与答疑</a></li>
        </ul>
      
        <div class="content_info"  v-if="tab == 'big'">
           <div class="introduce" v-html="courseInfo.introduce"></div>
          <y-syllabus @playfunc="videoPlay" :list="courseInfo.chapterList" :nowNo="nowPeriodNo"></y-syllabus>
        </div>
        
<div class="content_info"  v-if="tab == 'task'">
    <div v-if="userType == 1">
    <router-link tag="a" target="_blank" :to="'/view/commitTask?courseId=' + this.$route.params.id + '&userType=2'" class="text_link">
       <button   class="solid_btn b_red" >提交作业</button>
    </router-link>
    </div>
    <div class="person_body clearfix">
      <div class="person_content">
        <div class="person_info ">
          <table class="table ">
            <thead>
              <tr>
                <th>序号</th>
                <th>所属课程名称</th>
                <th>任务文件(点击下载)</th>             
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in listFor2" :key="item.id">
                <td>{{index + 1}}</td>
                <td class="name">{{item.courseName}}</td>
                <td class="c_green">
                  <a :href="item.fileUrl">{{item.fileName}}</a>            
                </td>                         
              </tr>                     
            </tbody>
          </table>       
        </div>
      </div>
    </div>
</div>

       
<div class="content_info"  v-if="tab == 'classResource'">
    <div class="person_body clearfix">
          <div class="person_content">
            <div class="person_info ">
              <table class="table ">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>所属课程名称</th>
                    <th>资源文件(点击下载)</th>           
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in listFor1" :key="item.id">
                    <td>{{index + 1}}</td>
                    <td class="name">{{item.courseName}}</td>
                    <td class="c_green">
                      <a :href="item.fileUrl">{{item.fileName}}</a>            
                    </td>                         
                  </tr>                     
                </tbody>
              </table>       
            </div>
          </div>
      </div>
</div>


<div class="content_info"  v-if="tab == 'answerDoubt'">
      
    <div class="person_body clearfix">
          <div class="person_content">
            <div class="person_info ">
              <table class="table ">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>问题</th>
                    <th>时间</th>
                    <th>操作</th>           
                  </tr>
                </thead>
                 <tbody>
                  <tr v-for="(item, index) in listForQuestion" :key="item.id">
                    <td>{{index + 1}}</td>
                    <td class="name">{{item.title}}</td>    
                    <td class="name">{{item.gmtCreate}}</td>                           
                    <td class="operate">
                      <router-link tag="a" target="_blank" :to="'/view/detail?themeId=' +item.id + '&title='+ (item.title)  + '&userType=2'" class="text_link">
                        展开查看
                    </router-link>
                     
                    </td>
                  </tr>         
                  <tr  v-if="userType == 1">               
                    <td class="name"><input type="text" v-model="obj.title" class="form_input" placeholder="请发问"></td>
                    <td class="operate">
                      <button class="solid_btn b_red" @click="addPraxis" :disabled="solidBtn">发布</button>
                    </td>
                  </tr> 
                 </tbody>
              </table>       
            </div>
          </div>
      </div>
</div>



</div>
      <div class="layout_right">
        <div class="teacher_info clearfix">
          <span class="head">讲师简介</span>
          <div class="teacher_msg">
            <div class="teacher_msg_right">
              <img class="teacher_phone" v-if="teacherInfo.headImgUrl" :src="teacherInfo.headImgUrl" alt="">
              <img class="teacher_phone" v-else src="~/assets/image/friend.jpg" alt="">
              <div class="teacher_name">
                {{teacherInfo.lecturerName}}
              </div>
              <div v-html="teacherInfo.introduce" class="info_box"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <y-footer></y-footer>
  </div>

  
</template>
<script>
import YDisplay from '~/components/course/Display'
import YFooter from '~/components/common/Footer'
import YSyllabus from '~/components/course/Syllabus'
import YWatchVideo from '~/components/course/WatchVideo'
import {courseDetail, userCourseDetail, chapterSign} from '~/api/course.js'
import {courseOtherFileListNoToken,courseOtherFileListHaveToken,answerDoubtList,answerDoubtViewDetail,answerDoubtSaveTitleForStudent,answerDoubtSaveReply} from '~/api/account/courseOtherFile'

export default {
  components: {
    YFooter,
    YDisplay,
    YSyllabus,
    YWatchVideo
  },
  head () {
    return {
      title: '课程详情',
      
    }
  },
  data () {
    return {
      tab: 'big',
      nowPeriodNo: '',  //当前播放章节
      solidBtn: false,
      listFor1: [],
      listFor2: [],
      listForQuestion:[], 
      questionDetail:[],         
      obj: {
        title: '', 
        studentId: [],  
        courseId: []
      },
      userType: '',
      videoSrc: ''
    }
  },
  validate ({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  },
 
  async asyncData(context) {
    let tk = context.store.state.tokenInfo;
    let userInfo = context.store.state.userInfo;
    
    try {
      let result = new Object();
      if (tk) {

        let {data} = await userCourseDetail({courseId: context.params.id}, tk);
        console.log(data)
        console.log('info===== ')
        if (data.code == 200) {
          result.courseInfo = data.data;
          result.teacherInfo = data.data.lecturer;
          result.isbuy = false;
          result.isLogin = false;
        }else if (data.code >= 300 && data.code <= 400){
          // context.redirect('login');
          context.store.dispatch('REDIRECT_LOGIN')
        }else{
          result.courseInfo = null;
        }

       //课程资源
 await courseOtherFileListHaveToken({courseId: context.params.id,type:1}, tk).then(res => {
          res = res.data       
          console.log(res)
          if (res.code == 200) {          
          result.listFor1 = res.data.list;
        }else if (data.code >= 300 && data.code <= 400){
          // context.redirect('login');
          context.store.dispatch('REDIRECT_LOGIN')
        }else{
          result.listFor1 = null;
        }
      
        })
          //布置作业
 await courseOtherFileListHaveToken({courseId: context.params.id,type:2}, tk).then(res => {
          res = res.data       
          console.log(res)
          if (res.code == 200) {              
          result.listFor2 = res.data.list;
        }else if (data.code >= 300 && data.code <= 400){
          // context.redirect('login');
          context.store.dispatch('REDIRECT_LOGIN')
        }else{
          result.listFor2 = null;
        }
      
        })

         //答疑列表
 //await answerDoubtList({courseId: context.params.id,studentId:userInfo.userNo}, tk).then(res => {
   await answerDoubtList({courseId: context.params.id}, tk).then(res => {
          res = res.data  
        if (res.code == 200) {                  
          result.listForQuestion = res.data.list;
      
        }else if (data.code >= 300 && data.code <= 400){
          // context.redirect('login');
          context.store.dispatch('REDIRECT_LOGIN')
        }else{
          result.listForQuestion = null;
        }
      
        })


      } else{

        let {data} = await courseDetail({courseId: context.params.id});
        console.log(data)
        console.log('info=====')
        if (data.code == 200) {
          result.courseInfo = data.data;
          result.teacherInfo = data.data.lecturer;
          result.isbuy = false;
          result.isLogin = false;
        }else{
          result.courseInfo = null;
        }

        //课程资源
 await courseOtherFileListNoToken({courseId: context.params.id,type:1}).then(res => {
          res = res.data       
          console.log(res)
          if (res.code == 200) {          
          result.listFor1 = res.data.list;
        }else if (data.code >= 300 && data.code <= 400){
          // context.redirect('login');
          context.store.dispatch('REDIRECT_LOGIN')
        }else{
          result.listFor1 = null;
        }
      
        })
          //布置作业
 await courseOtherFileListNoToken({courseId: context.params.id,type:2}).then(res => {
          res = res.data       
          console.log(res)
          if (res.code == 200) {          
          result.listFor2 = res.data.list;
        }else if (data.code >= 300 && data.code <= 400){
          // context.redirect('login');
          context.store.dispatch('REDIRECT_LOGIN')
        }else{
          result.listFor2 = null;
        }
      
        })

      }
      return result
    } catch (e) {
      context.error({ message: 'User not found', statusCode: 404 })
    }
    
  },


  methods: {
    videoPlay (data) {
      //console.log(data)
      if (this.courseInfo.isPay || data.isFree) {
      window.scrollTo(0, 0)
     // console.log(data)
      this.nowPeriodNo = data.id
      chapterSign({
        ip: 'string',
        periodId: data.id,
        videoVid: data.videoVid
      }).then(res => {
        res = res.data
        this.isResetVideo = false
       // console.log(res)
        console.log("res==========")
        if (res.code === 200) {
          this.play(Object.assign({vid: data.videoVid}, res.data));
        } else if (res.code === 402) {
          this.$msgBox({
            content: '购买后才可以观看',
            isShowCancelBtn: false
          })
        }
      }).catch(() => {
        this.isResetVideo = false
      })
      } else {
        this.$msgBox({
          content: '购买后才可以播放',
          isShowCancelBtn: false
        })
        return false;
      }
    },
    play (data) {
      this.videoSrc = data.vid;
      // let box = this.$refs.watchVideo.$refs.videobox;
      // if (this.player) {
      //   this.player.changeVid({
      //     vid:data.vid,
      //     playsafe: data.token,
      //     ts: data.ts,
      //     sign: data.sign,
      //     autoplay: true
      //   });
      // } else {
      //   this.player = polyvObject('#player').videoPlayer({
      //       'width': box.offsetWidth,
      //       'height': box.offsetHeight,
      //       'forceH5': true,
      //       'code': data.code,
      //       'playsafe': data.token,
      //       'ts': data.ts,
      //       'sign': data.sign,
      //       'vid': data.vid
      //   });
      // }
    },

    addPraxis () {     
  
      if (!this.obj.courseId) {
        this.$msgBox({
          content: '请填写问题',
          isShowCancelBtn: false
        })
        return
      }
    
      this.solidBtn = true;
      this.obj.courseId = this.$route.params.id;
      this.obj.studentId = JSON.parse(localStorage.getItem('OcUserInfo')).userNo;
    
      answerDoubtSaveTitleForStudent(this.obj).then(res => {
        res = res.data;
        this.solidBtn = false;
        if (res.code === 200) {
          this.listForQuestion.push(res.data);
          this.num = this.list.length + 1;
          this.obj ='';  
        } else {
          if (res.code >= 300 && res.code < 400) {
            this.$msgBox({
              content: res.msg,
              isShowCancelBtn: false
            }).then(() => {
              this.$store.dispatch('REDIRECT_LOGIN', result.code)
            }).catch(() => {
              this.$store.dispatch('REDIRECT_LOGIN', result.code)
            })
          } else {
            this.$msgBox({
              content: res.msg,
              isShowCancelBtn: false
            }).catch(() => {})
          }
        }     
      }).catch(() => {
        this.solidBtn = false;
        this.$msgBox({
          content: '保存成功',
          isShowCancelBtn: false
        });
          this.obj ='';  
      })
     },

     openDetail(answerDoubtThemeId) {
        answerDoubtViewDetail(answerDoubtThemeId).then(res => {
                res = res.data;
                console.log(res.data);
                if (res.code === 200 && res.data.list.length > 0 ) {
                  this.questionDetail = res.data.list;
               
                } else {
                  if (res.code >= 300 && res.code < 400) {
                    this.$msgBox({
                      content: res.msg,
                      isShowCancelBtn: false
                    }).then(() => {
                      this.$store.dispatch('REDIRECT_LOGIN', result.code)
                    }).catch(() => {
                      this.$store.dispatch('REDIRECT_LOGIN', result.code)
                    })
                  } else {
                    this.$msgBox({
                      content: res.msg,
                      isShowCancelBtn: false
                    }).catch(() => {})
                  }
                }     
              }).catch(() => {
                this.solidBtn = false;
                this.$msgBox({
                  content: '保存成功',
                  isShowCancelBtn: false
                });
                  this.obj ='';  
              })
     }
  },
  mounted () {
    console.log(this.$route.params.id)
    if(localStorage.getItem('OcUserInfo') == null  ){
        this.userType = 0 //游客
    }else{     
        this.userType = JSON.parse(localStorage.getItem('OcUserInfo')).userType;
    }
    
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import '~/assets/css/account.scss';
  .person_body {
    // width: 1200px;
    // margin: 30px auto 0;
    // min-height: 1000px;
    .upload_com {
      .solid_btn {
        display: inline-block;
        height: 25px;
        line-height: 22px;
        background: #fff;
        border-color: #ddd;
        color: #999;
        outline: none;
        &:hover {
          color: #D51423;
          border-color: #D51423;
        }
      }
    }
  }
  // .person_content {
  //   width: 1012px;
  //   float: right;
  //   background: #fff;
  //   border-radius: 6px;
  // }
  // .person_title {
  //   border-bottom: 1px solid rgb(242, 242, 242);
  //   li {
  //     color: #D51423;
  //     float: left;
  //     line-height: 60px;
  //     padding: 0 30px;
  //     border-bottom: 2px solid #D51423;
  //     font-size: 14px;
  //   }
  // }
  .person_info {
    padding-bottom: 40px;
  }
  .table td.name {
    text-align: center;
  }
  .table th {
    line-height: 36px;
    color: #333;
    background-color: #ffffff;
}
  .name{   
    .form_input{
      margin: 10px 0;
      height: 34px;
      border: 1px solid #e7e7e7;
      width: 278px;
      text-indent: 1em;
    }
  }
  // .cont_btn {
  //   width: 280px;
  //   display: block;
  //   margin:20px auto 0;
  // }




.course_detail{
  .detail_info {
    margin: 20px auto 60px;
    width: 1200px;
  }
  .layout_left {
    width: 920px;
    float: left;
    .info_body {
      margin-bottom: 30px;
    }
  }
  .course_tab{
    padding-left: 30px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    li {
      float: left;
      height: 66px;
      line-height: 66px;
      margin-right: 80px;
      &.on {
        border-bottom: 2px solid #D51423;
        a {
          color: #D51423;
        }
      }
      a {
        color: #000;
        font-size: 14px;
        font-weight: 700;
        &:hover {
          text-decoration: none;
          color: #D51423;
        }
      }
    }
  }
  .content_info{
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    min-height: 400px;
    .title {
      border-left: 3px solid #000;
      padding-left: 12px;
      font-size: 16px;
      color: #000;
      font-weight: 700;
      margin-bottom: 25px;
    }
    .introduce{
      font-size: 14px;
      line-height: 30px;
      color: #333;
      padding-left: 8px;
    }
    .task{
      font-size: 18px;
      line-height: 40px;
      color: #333;
      padding-left: 18px;
    }
  }
  .layout_right{
    width: 260px;
    float: right;
  }
  .teacher_info {
    background: #fff;
    border-radius: 8px;
    position: relative;
    min-height: 180px;
    .head {
      display: block;
      line-height: 60px;
      height: 60px;
      padding-left: 20px;
      font-size: 14px;
      color: #333;
      border-bottom: 1px solid rgb(228, 228, 228);
    }
    .teacher_phone {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: rgb(228, 228, 228);
      text-align: center;
      line-height: 46px;
      font-size: 13px;
      color: #999;
      float:left;
      margin: 0px 10px 0 10px;
      img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
      }
    }
    .teacher_msg_right {
      width: 235px;
      float: right;
      margin: 12px 15px 12px 12px;
      line-height: 20px;
    }
    .teacher_name {
      font-size: 14px;
      font-weight: 700;
      color: #333;
      margin-bottom: 10px;
    }
  }
}
</style>